<script setup lang="ts">
import { ChatLineRound, Picture, Film } from '@element-plus/icons-vue'
import NavHeader from '@/components/NavHeader.vue'
import { useRouter } from 'vue-router'
import type { Component } from 'vue'
import { ref, onMounted } from 'vue'
import { useApiKeyStore } from '@/stores/apiKeyStore'

const router = useRouter()
const apiKeyStore = useApiKeyStore()

// 菜单配置项
const menus: Array<{
  title: string
  desc: string
  icon: Component
  path: string
}> = [
  {
    title: '文本润色',
    desc: 'AI 文本润色，一键生成抖音爆款风格',
    icon: ChatLineRound,
    path: '/text-polish'
  },
  {
    title: '智能分镜',
    desc: 'AI 辅助分镜创作，智能生成分镜方案',
    icon: Film,
    path: '/storyboard'
  },
  {
    title: 'Gemini Chat',
    desc: '智能对话助手，基于 Gemini 模型',
    icon: ChatLineRound,
    path: '/chat'
  },
  {
    title: 'SD WebUI',
    desc: 'AI 图像生成，基于 Stable Diffusion',
    icon: Picture,
    path: '/sd'
  }

]

const activeTab = ref(menus[0].path)

const handleTabClick = (pane: any) => {
  activeTab.value = pane.paneName
  router.push(pane.paneName)
}

// 确保在组件实例创建后再使用路由相关功能
onMounted(() => {
  // 应用启动时初始化API Key
  apiKeyStore.initialize()
  // 获取当前路由路径
  const currentPath = router.currentRoute.value.path
  // 如果当前路径是根路径'/'，则默认选中第一个菜单
  if (currentPath === '/') {
    activeTab.value = menus[0].path
  } else {
    // 否则将activeTab设置为当前路由路径
    activeTab.value = currentPath
  }
  router.push(activeTab.value)
})
</script>

<template>
  <div class="home">
    <nav-header />
    <div class="main-layout">
      <div class="sidebar">
        <el-tabs
          tab-position="left"
          v-model="activeTab"
          @tab-click="handleTabClick"
          class="sidebar-tabs"
        >
          <el-tab-pane
            v-for="menu in menus"
            :key="menu.path"
            :label="menu.title"
            :name="menu.path"
          >
            <template #label>
              <span class="tab-label">
                <el-icon>
                  <component :is="menu.icon" />
                </el-icon>
                <span>{{ menu.title }}</span>
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="content-area">
        <!--路由缓存-->
        <router-view v-slot="{ Component, route }">
          <keep-alive>
            <component
              v-if="route.meta.keepAlive"
              :is="Component"
              :key="route.fullPath"
            />
          </keep-alive>
          <component
            v-if="!route.meta.keepAlive"
            :is="Component"
            :key="route.fullPath"
          />
        </router-view>

      </div>
    </div>
  </div>
</template>

<style scoped>
.home {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: #f5f6fa;
  overflow: hidden;
}

.main-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 220px;
  background: #fff;
  border-right: 1px solid #f0f0f0;
  padding: 2rem 0;
  overflow-y: auto;
}

.content-area {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  margin: 0 1rem 1rem 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

.el-icon {
  font-size: 1.6rem;
  color: var(--primary-color);
}

:deep(.el-tabs__content) {
  overflow: auto;
}

:deep(.el-tabs__nav-wrap) {
  overflow: auto;
}

/* 确保router-view占满content-area并正确显示子组件 */
:deep(router-view) {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
